<script>
export default {
  name: "warning",
  components: {
  },
  data() {
    return {
      formData: {
        sourceName: '',
        areaName: '',
        type: ''
      },
      tableData: [{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      },{
        date: '2016-05-03',
        name: '家盛',
        state: '/',
        city: '浮来春小区',
        type: '供暖不热',
        content: '投诉内容',
        tag: 'Home',
      }]
    };
  },
  computed: {
    mainStyle() {
      let maxHeight = window.innerHeight / window.dpr - 230;
      return {
        height: maxHeight + 'px'
      }
    },
  },
  watch: {},
  mounted() {
  },
  beforeUnmount() { },
  methods: {
    
    handleClick() { },
    doSearch() { },
    reset() {
      this.formData.type = '';
      this.formData.sourceName = '';
      this.formData.areaName = '';
      this.tableData = []
    }
  },
};
</script>

<template>
  <!-- layout 外包层 -->
  <div class="manager full-height">
    <div class="search-area">
      <el-row :gutter="10">
        <el-col :span="3">
          <el-input placeholder="请输入热源名称" v-model="formData.sourceName"></el-input>
        </el-col>
        <el-col :span="3">
          <el-input placeholder="请输入小区名称" v-model="formData.areaName"></el-input>
        </el-col>
        <el-col :span="3">
          <el-select placeholder="请选择投诉类型" v-model="formData.type" clearable>
            <el-option value="1" label="供暖不热"></el-option>
            <el-option value="2" label="申请供热服务"></el-option>
            <el-option value="3" label="收费退费欠费赔偿等问题"></el-option>
            <el-option value="4" label="供热设施维修"></el-option>
            <el-option value="5" label="非市政集中供热问题"></el-option>
            <el-option value="6" label="其它问题"></el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="() => {
            doSearch()
          }">查询</el-button>
          <el-button type="info" @click="() => {
            reset()
          }">重置</el-button>
        </el-col>
        <el-col :span="8">
        </el-col>
        <el-col :span="4">
          <el-button type="success" plain>
            <el-icon class="el-icon--right"><Upload /></el-icon>导出图表
          </el-button>
        </el-col>
      </el-row>
    </div>
    <div class="list-area">
      <el-table :data="tableData" :style="mainStyle" border stripe>
        <el-table-column header-align="center" fixed prop="name" label="热源企业" width="300" />
        <el-table-column header-align="center" align="center" prop="date" label="上报时间" width="150" />
        <el-table-column header-align="center" prop="state" label="来源" width="120" />
        <el-table-column header-align="center" prop="city" label="小区" width="120" />
        <el-table-column header-align="center" align="center" prop="type" label="投诉类型" width="120" />
        <el-table-column header-align="center" prop="content" label="投诉内容" width="120" />
        <el-table-column header-align="center" fixed="right" label="操作" width="200px">
          <template #default>
            <el-button link type="danger" size="small" @click="handleClick">
              删除
            </el-button>
            <el-button link type="primary" size="small">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-area">
        <el-pagination background layout="prev, pager, next" :total="1000" />
      </div>
    </div>

  </div>
</template>
<style lang="less">
.warning {

  &>.list-area {
    height: calc(100% - 50px);
    &>.page-area {
      height: 50px;
    }
  }
}

.search-area {
  margin-bottom: 1rem;
}

.page-area {
  padding-right: 1rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #fff;
}
</style>
